<script setup>
import {ref, defineProps, onBeforeMount, defineEmits} from "vue";
import { useRouter } from "vue-router";
import requestUtil,{getServerUrl} from "@/utils/request.js";
import Cookies from "js-cookie";
import { ElMessage } from "element-plus";
let star = ref();
let props = defineProps({
  menu: Object,
  storeId: Number
});
// const load = async () => {
//   let res = await requestUtil.get("/app/loadStarDishes/", {
//     userId: Cookies.get("userId"),
//     storeId: props.storeId
//   });
// };
// onMounted(()=>{
//   load();
// })
onBeforeMount(async ()=>{
  await getImage()
})
const getImage =  () => {
  return getServerUrl()+'media/dishes/';
}
let num = ref(new Array(8).fill(0.0));
const addgoodList = async (id, index) => {
  if (num.value[index] == 0) {
    ElMessage.warning("请选择商品数量!");
  } else {
    let res = await requestUtil.get("/app/addShopCar", {
      id: id,
      num: num.value[index],
      userId: Cookies.get("userId")
    });
    if (res.data.code == 200 && num.value[index] > 0) {
      emit('refreshOrders');
      ElMessage.success("添加成功");
      props.menu[index].quantity -= num.value[index];
      num.value[index] = 0;
    } else {
      ElMessage.error("添加失败");
    }
  }
};
const add = async (id, index) => {
  if (num.value[index] < props.menu[index].quantity) {
    num.value[index] += 1;
  } else {
    ElMessage.warning("库存不足");
  }
};
const sub = async (id, index) => {
  if (num.value[index] > 0) {
    num.value[index] -= 1;
  }
};
// const starLaCarte = async (id) => {
//   if (star.value === 0) {
//     let res = await requestUtil.put("/app/starLaCarte/", {
//       id: id,
//       star: 1,
//       userId: Cookies.get("userId")
//     });
//   } else {
//     star.value = 0;
//   }
// };

const emit = defineEmits(['refreshOrders']);
</script>

<template>
  <div class="lacarte" v-for="(item,index) in menu">
    <div class="img">
      <img :src="getImage()+item.img" />
    </div>
    <div class="text">
      <h3>{{ item.name }}</h3>
      <div class="rate">
        <div class="sale">库存 {{ item.quantity }}</div>
      </div>
      <div class="price">
        <span class="price">￥{{ item.price }}</span>
      </div>
    </div>
    <div class="num">
      <button @click="sub(item.id,index)" v-show="num[index]>0">-</button>
      <input type="number" v-model="num[index]" v-show="num[index]>0" />
      <button @click="add(item.id,index)" :class="{Jia:num[index]===0}">+</button>
    </div>
    <div class="shopcar">
      <button @click="addgoodList(item.id,index)" :disabled="item.quantity === 0">加入购物车</button>
      <!-- <button @click="starLaCarte(item.id)">{{star.value==0?'收藏':'已收藏'}}</button> -->
<!--      <button @click="starLaCarte(item.id)">收藏</button>-->
    </div>
  </div>
</template>

<style scoped>
.lacarte .img img {
  width: 200px;
}

.lacarte {
  position: relative;
  padding: 20px;
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
  border-bottom: 0.5px solid #ececec;
}

.lacarte .img {
  width: 15%;
}

.lacarte .img img {
  width: 100%;
}

.lacarte .text {
  width: 30%;
  margin-left: 22px;
}

.lacarte .text h3 {
  position: relative;
  font-size: 30px;
  font-weight: normal;
}

.lacarte .text .rate .sale {
  color: #333333;
}

.lacarte .text .rate {
  display: flex;
  align-items: center;
  justify-content: left;
  padding-bottom: 5px;
  font-size: 24px;
}

.lacarte .text .price {
  color: red;
  font-size: 24px;
}

.lacarte .num {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: left;
  padding-right: 20px;
}

.lacarte .num input {
  width: 50px;
}

.lacarte .num button {
  color: white;
  margin: 0 5px;
  font-size: 20px;
  background-color: #ffba20;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50px;
}

.lacarte .shopcar {
  width: 30%;
}

.lacarte .shopcar button {
  margin: 10px 0;
  background-color: #ffba20;
  position: relative;
  left: 60px;
  border: none;
  color: white;
  border-radius: 20px;
  width: 60%;
  padding: 5px 0;
  font-size: 21px;
}

.Jia {
  background-color: red;
  position: relative;
  left: 100px;
}
</style>